<template>
	<view v-if="vuex_isMobile" class="content-images-m">
		<view class="title">
			{{title}}
		</view>
		<view class="img-box">
			<image v-for="(item, index) in imgList" :key="index" class="img-item" :src="item" mode="widthFix">
			</image>
		</view>
	</view>
	<view v-else class="content-images">
		<view class="title">
			{{title}}
		</view>
		<view class="img-box">
			<image v-for="(item, index) in imgList" :key="index" class="img-item" :src="item" mode="widthFix">
			</image>
		</view>
	</view>
</template>

<script>
	import {
		getImageList,
	} from "@/common/api.js";
	export default {
		data() {
			return {
				imgList: [],
				title: ''
			}
		},
		onLoad() {

		},
		methods: {
			getInfo(id) {
				getImageList({
					menuId: id
				}).then(res => {
					this.title = res.data.title
					this.imgList = res.data.url.split(',')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-images-m {
		padding: 0 136px;

		.title {
			width: 100%;
			font-weight: 500;
			text-align: center;
			line-height: 105px;
			font-size: 72px;
			padding-top: 72rpx;
			color: #193F93;
		}

		.img-box {
			display: flex;
			flex-wrap: wrap;

			.img-item {
				width: 100%;
				height: 727px;
				margin-bottom: 43px;
			}
		}

	}

	.content-images {
		.title {
			width: 100%;
			font-weight: 500;
			text-align: center;
			line-height: 80px;
			font-size: 24px;
			color: $maincolor;
		}

		.img-box {
			display: flex;
			flex-wrap: wrap;

			.img-item {
				width: 33%;
				height: 200px;
				margin-right: 0.3%;
				margin-bottom: 0.3%;
			}
		}

	}
</style>